<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>艺术品溯源</title>
    <style>
        body {
            font-family: "Microsoft YaHei", sans-serif;
            background: #f8f9fa;
            margin: 0;
            padding: 20px;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        h2 {
            text-align: center;
            color: #333;
            margin-bottom: 30px;
        }
        .search-box {
            display: flex;
            gap: 10px;
            margin-bottom: 30px;
        }
        .search-box input {
            flex: 1;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        .search-box button {
            padding: 10px 20px;
            background: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        .artwork-info {
            margin-bottom: 30px;
            padding-bottom: 20px;
            border-bottom: 1px solid #eee;
        }
        .artwork-info h3 {
            color: #333;
            margin-bottom: 10px;
        }
        .trace-list {
            position: relative;
            padding-left: 30px;
        }
        .trace-list::before {
            content: '';
            position: absolute;
            left: 10px;
            top: 0;
            bottom: 0;
            width: 2px;
            background: #007bff;
        }
        .trace-item {
            position: relative;
            margin-bottom: 25px;
            padding: 15px;
            background: #f8f9fa;
            border-radius: 6px;
        }
        .trace-item::before {
            content: '';
            position: absolute;
            left: -36px;
            top: 20px;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: #007bff;
        }
        .trace-time {
            font-weight: bold;
            color: #333;
            margin-bottom: 5px;
        }
        .trace-type {
            display: inline-block;
            padding: 3px 8px;
            background: #17a2b8;
            color: white;
            border-radius: 4px;
            font-size: 0.8em;
            margin-right: 10px;
        }
        .trace-desc {
            margin-top: 8px;
            color: #666;
        }
        .trace-extra {
            margin-top: 5px;
            font-size: 0.9em;
            color: #888;
        }
        .message {
            text-align: center;
            margin: 30px 0;
            color: #666;
        }
        .back-link {
            display: block;
            text-align: center;
            margin-top: 30px;
            color: #007bff;
            text-decoration: none;
        }
        .back-link:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>艺术品溯源查询</h2>
        
        <div class="search-box">
            <input type="number" id="artworkId" placeholder="输入艺术品ID">
            <button onclick="searchTrace()">查询</button>
        </div>
        
        <div id="artworkInfo" class="artwork-info"></div>
        
        <div id="traceList" class="trace-list"></div>
        <div id="message" class="message"></div>
        
        <a href="index.html" class="back-link">返回首页</a>
    </div>
    <script>
        // 从URL获取艺术品ID（如果有）
        const urlParams = new URLSearchParams(window.location.search);
        const artworkIdFromUrl = urlParams.get('id');
        if (artworkIdFromUrl) {
            document.getElementById('artworkId').value = artworkIdFromUrl;
            searchTrace(); // 自动查询
        }

        function searchTrace() {
            const artworkId = document.getElementById('artworkId').value;
            if (!artworkId) {
                alert('请输入艺术品ID');
                return;
            }

            // 先获取艺术品基本信息
            fetch(`/artwork/${artworkId}`)
            .then(res => res.json())
            .then(artData => {
                if (!artData.success || !artData.artwork) {
                    document.getElementById('artworkInfo').innerHTML = '';
                    document.getElementById('traceList').innerHTML = '';
                    document.getElementById('message').textContent = '未找到该艺术品';
                    return;
                }

                // 显示艺术品信息
                const art = artData.artwork;
                document.getElementById('artworkInfo').innerHTML = `
                    <h3>${art.title}</h3>
                    <p>创作者：${art.creator || '未知'}</p>
                    <p>当前价格：¥${art.price}</p>
                    <p>当前拥有者：${art.seller_name || '未知'}</p>
                `;

                // 获取溯源记录
                fetch(`/trace/artwork/${artworkId}`)
                .then(res => res.json())
                .then(traceData => {
                    const traceListEl = document.getElementById('traceList');
                    const msgEl = document.getElementById('message');
                    
                    if (traceData.success && traceData.trace_list.length) {
                        traceListEl.innerHTML = traceData.trace_list.map(item => `
                            <div class="trace-item">
                                <div class="trace-time">${item.event_time}</div>
                                <div>
                                    <span class="trace-type">${item.event_type}</span>
                                    <span class="trace-desc">${item.event_description}</span>
                                </div>
                                ${item.event_extra ? `<div class="trace-extra">${item.event_extra}</div>` : ''}
                            </div>
                        `).join('');
                        msgEl.textContent = '';
                    } else {
                        traceListEl.innerHTML = '';
                        msgEl.textContent = '暂无溯源记录';
                    }
                });
            })
            .catch(err => {
                document.getElementById('message').textContent = '查询失败：' + err;
            });
        }
    </script>
</body>
</html>
